import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { NavBar, Input, Cell, Uploader } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import './privacy.css'
export default function Feedback() {
    const [UserIdentity, setUserIdentity] = useState([])
    const [sty, setSty] = useState(0)
    const [from, setFrom] = useState({
        cate: '',
        conText: '',
        phone: '',
        img: ''
    })
    const navigate = useNavigate()
    const getUserIdentity = async () => {
        const res = await axios.get('http://localhost:3009/userIdentity')
        if (res.data.code === 200) {
            setUserIdentity(res.data.data)
        }
    }
    useEffect(() => {
        getUserIdentity()
    }, [])


    const defaultValue = []
    const submit = async () => {
        const res = await axios.post('http://localhost:3009/picture', from)
        if (res.data.code === 200) {
            alert('上传成功')
            setFrom({
                cate: '',
                conText: '',
                img: '',
                phone: ''
            })
        }
        navigate('/setup')
    }

    return (
        <div>
            <NavBar
                title="意见反馈"
                onClickLeft={() => navigate(-1)}
            />
            <div style={{ marginTop: '10px', marginLeft: '10px' }}>
                <h4>用户身份</h4>
                <br />
                <ul style={{ display: 'flex', justifyContent: 'space-around' }}>
                    {UserIdentity.map((item, index) => {
                        return <li
                            key={item._id}
                            style={{ width: '80px', border: '1px solid #e0e0e0', textAlign: 'center', lineHeight: '30px' }}
                            className={sty === item._id ? 'active' : ''}
                            onClick={() => { setSty(item._id); setFrom({ ...from, cate: item._id }) }}
                        >{item.name}</li>
                    })}
                </ul>
            </div>

            <div style={{ marginTop: '20px', marginLeft: '10px' }}>
                <h4>反馈的问题</h4>
                <Cell style={{ marginTop: 10 }}>
                    <Input.TextArea
                        placeholder="问题描述尽量详细"
                        autoSize={{ minHeight: 80, maxHeight: 120 }}
                        value={from.conText}
                        onChange={(e) => { setFrom({ ...from, conText: e }) }}
                    />
                </Cell>
            </div>

            <div style={{ marginLeft: '10px' }}>
                <Uploader
                    // accept='*'
                    defaultValue={defaultValue}
                    onChange={v => {
                        if (v.length > 0) {
                            setFrom({ ...from, img: v[0].url });
                        } else {
                            setFrom({ ...from, img: '' }); // 如果用户删除了图片，清空 img 字段
                        }
                    }}
                    uploadText='上传图片'
                />
            </div>


            <Cell>
                <Input
                    placeholder='请留下您的联系电话'
                    style={{ lineHeight: '40px', backgroundColor: '#f9f9f9' }}
                    value={from.phone}
                    onChange={(e) => { setFrom({ ...from, phone: e }) }}
                />
            </Cell>

            <div style={{ textAlign: 'center' }}>
                <button
                    style={{ width: '60%', color: 'white', lineHeight: '50px', backgroundColor: '#6fd093', border: 'none', borderRadius: '5px' }}
                    onClick={submit}
                >提交</button>
            </div>

        </div>
    )
}
